<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h1>{{name}}</h1>
        <h2>{{name2}}</h2>
        <h2>{{nameWatch}}</h2>

        <div><p></p></div>
        <div ref='box' v-for='i in ary' :key='i'>hello</div>
        <aaaa>
          <h2 slot='a'>fgsdgsdfg</h2>
          <h3>1236654</h3>
        </aaaa>
    </div>
</body>
</html>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
    // 多个数据影响一个数据的时候 我们考虑使用 计算属性
    // 一个数据影响多个数据的时候 我们考虑使用 侦听器
    Vue.component('aaaa',{
      template:'<div>dfgdg</div>',
      created() {
        console.log(this)
      },
    })
    let vm = new Vue({
        el:'#app',
        // template:'<h1>hahah</h1>',
        mounted() {
          this.ary.push(555)
          this.$nextTick(()=>{
            console.log(this.$refs.box)
          })
        },
        data:{
            name:"珠峰",
            nameWatch:'',
            obj:{a:123},
            ary:[111,222,333,444]
        },
        computed:{
          //这里属性都是新属性 不能跟 data中的属性重名
          name2(){
            return this.name.split('').reverse().join('')
          }
        },
        watch:{
          // 侦听器
          // 这里的属性都是已经存在的属性
          // name(newV,oldV){
          //   // 这个函数 只要 name发生改变 这个函数就会执行
          //   // 这个函数体爱写啥写啥
          //   console.log(newV,oldV)
          //   this.nameWatch = this.name.split('').reverse().join('')
          // }
          name:{
            immediate:true,
            handler(newV,oldV){
              console.log(newV,oldV)
              this.nameWatch = this.name.split('').reverse().join('')
            }
          },
          // obj:{
          //   immediate:true,
          //   deep:true,// 当引用数据类型的内部属性发生改变时 也能触发当前函数handler
          //   handler(newV,oldV){
          //     console.log(newV===oldV)
          //   }
          // }
          obj:[
            {
              deep:true,
              handler(){
                console.log(1111)
              }
            },
            {
              immediate:true,
              handler(){
                console.log(2222)
              }
            }
          ]
        }
    });
</script>